<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            padding-left: 0;
            font-family: Helvetica, Arial
        }
        .staggred-transition{
            transition: all .5s ease;
            overflow: hidden;
            margin: 0;
            height: 20px;
        }
        .staggred-enter, .staggred-leave{
            opacity:0;
            height: 0;
        }
    </style>
    <script src="resource/js/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="query">
    <ul>
        <li v-for="item in list | filterBy query" translate="staggred" stagger="100">
            {{item.msg}}
        </li>
    </ul>
    <script>
        new Vue({
            el: '#app',
            data:{
                query: '',
                list:[
                    { msg: 'Bruce Lee' },
                    { msg: 'Jackie Chan' },
                    { msg: 'Chuck Norris' },
                    { msg: 'Jet Li' },
                    { msg: 'Kung Fury' }
                ]

            }
        })
    </script>
</div>
</body>
</html>